<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>广告列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- 搜索用户框 -->
                <el-input v-model="query.param.source" placeholder="来源" class="handle-input mr10" width="10"></el-input>
                <el-input v-model="query.param.version" placeholder="版本" class="handle-input mr10"
                          width="10"></el-input>
                <el-select v-model="query.param.view" placeholder="类型" class="handle-select mr10">
                    <el-option key="1" label="轮播图" value="1"></el-option>
                    <el-option key="2" label="启动页" value="2"></el-option>
                    <el-option key="2" label="活动位置" value="2"></el-option>
                </el-select>
                <!-- 搜索按钮 -->
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <!-- 添加产品 -->
                <el-button type="primary" icon="el-icon-search" @click="addProduct">添加广告</el-button>
            </div>
            <!-- 产品列表 -->
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column prop="id" label="产品ID" width="180" align="center"></el-table-column>
                <el-table-column prop="source" label="来源" align="center"></el-table-column>
                <el-table-column prop="version" label="版本号" align="center"></el-table-column>
                <el-table-column label="展示类型" align="center">
                    <template slot-scope="scope">{{scope.row.isVideo === 1 ? '视频' : '图片'}}</template>
                </el-table-column>
                <el-table-column label="广告类型" align="center">

                    <template slot-scope="scope">{{scope.row.view === '1' ? '轮播图' : '启动页'}}</template>

                </el-table-column>
                <el-table-column prop="startTime" label="广告开始时间" align="center"></el-table-column>
                <el-table-column prop="endTime" label="广告结束时间" align="center"></el-table-column>
                <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >详情
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-lx-delete"
                                @click="deleteResource(scope.$index,scope.row)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 页码功能 -->
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 编辑（修改）的弹出框 -->
        <el-dialog :title="title" :visible.sync="editVisible" width="70%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="来源">
                    <el-input v-model="form.source" placeholder="请输入来源 ALL-全部"></el-input>
                </el-form-item>
                <el-form-item label="版本号">
                    <el-input v-model="form.version" placeholder="请输入版本号 ALL-全部"></el-input>
                </el-form-item>
                <el-form-item label="广告类型">
                    <el-select v-model="form.isVideo" placeholder="类型" class="handle-select mr10">
                        <el-option v-for="item in isVideo" :key="item.name" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请上传图片" v-if="form.isVideo == 0">
                    <el-upload
                            class="avatar-uploader"
                            :class="{disabled:uploadDisabled}"
                            :headers="myHeaders"
                            :action="uploadsrc"
                            accept="image/jpeg,image/gif,image/png"
                            list-type="picture-card"
                            :limit="1"
                            :before-upload="handleBeforeUpload"
                            :on-success="uploadSuccess"
                            :on-error="uploadError"
                            :on-remove="updateRemove"
                            :data="pdfData"
                            :file-list="imglist"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" v-model="form.displayUrl">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="视频地址" v-if="form.isVideo == 1">
                    <el-input v-model="form.displayUrl" placeholder="请输入视频地址"></el-input>
                </el-form-item>
                <el-form-item label="参数">
                    <el-input v-model="form.jumpParam" placeholder="请输入参数，如：{“resType”:3,“resId”:1}"></el-input>
                </el-form-item>
                <el-form-item label="播放位置">
                    <el-select v-model="form.view" placeholder="类型" class="handle-select mr10">
                        <el-option v-for="item in view" :key="item.name" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-col :span="11">
                        <el-date-picker
                                type="datetime"
                                placeholder="开始时间"
                                v-model="form.startTime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                style="width: 100%;"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-col :span="11">
                        <el-date-picker
                                type="datetime"
                                placeholder="结束时间"
                                v-model="form.endTime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                style="width: 100%;"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="form.sort" placeholder="排序顺序"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateClick(form)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<!-- 功能实现 -->
<script>

    import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
    import { uploadsrc } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab';
    import { formatDate } from '../../../utils/util.js';


    export default {
        name: 'basetable',
        data() {
            return {
                query: {
                    pageNum: 1,
                    pageSize: 10,
                    param: {
                        source: '',
                        version: '',
                        view: ''
                    }
                },
                title: '',
                form: {},
                isVideo: [
                    { id: 0, name: '图片' },
                    { id: 1, name: '视频' }
                ],
                view: [
                    { id: '1', name: '轮播图' },
                    { id: '2', name: '启动页' },
                    { id: '3', name: '活动图' }
                ],
                ortool: false,
                editVisible: false,
                tableData: [],
                multipleSelection: [],
                pageTotal: 0,
                id: -1,
                imageUrl: '',
                uploadsrc: '',
                myHeaders: {},
                dropDownData: [],
                status: 0,
                imglist: [],
                pdfData: {
                    type: 1,
                    path: 0
                }
            };
        },
        computed: {
            uploadDisabled: function() {
                if (this.imglist.length > 0 && document.getElementsByClassName('el-upload--picture-card')[0] != null) {
                    document.getElementsByClassName('el-upload--picture-card')[0].style.display = 'none';
                }
            }
        },
        created() {
            // 商品展示
            this.tablist();
            this.uploadsrc = uploadsrc;
        },
        methods: {
            getmyHeaders() {
                var dHeader = dynamicHeader();
                this.myHeaders.signature = dHeader.signature;
                this.myHeaders.nonce = dHeader.nonce;
                this.myHeaders.timestamp = dHeader.timestamp;
                this.myHeaders.appkey = dHeader.appkey;
                this.myHeaders.token = dHeader.token;
            },
            updateClick(row) {
                if (row.id) {
                    this.update(row);
                } else {
                    this.add(row);
                }
            },
            add(row) {
                advertisingAdd({
                    source: row.source,
                    version: row.version,
                    isVideo: row.isVideo,
                    displayUrl: row.displayUrl,
                    jumpParam: row.jumpParam,
                    view: row.view,
                    startTime: row.startTime,
                    endTime: row.endTime,
                    sort: row.sort
                }).then(res => {
                    if (res.returnCode == 200) {
                        this.tablist();
                        this.$message.success(`新增成功`);
                        this.editVisible = false;
                    }
                });
            },
            update(row) {
                advertisingUpdate({
                    id: row.id,
                    source: row.source,
                    version: row.version,
                    isVideo: row.isVideo,
                    displayUrl: row.displayUrl,
                    jumpParam: row.jumpParam,
                    view: row.view,
                    startTime: row.startTime,
                    endTime: row.endTime,
                    sort: row.sort
                }).then(res => {
                    if (res.returnCode == 200) {
                        this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                        this.tablist();
                        this.editVisible = false;
                    }
                });
            },
            //点击商品添加
            addProduct() {
                this.title = '新增';
                this.ortool = false;
                this.editVisible = true;
                this.form = {
                    jumpParam: '{“resType”:3,“resId”:1}',
                    sort: 1,
                    startTime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
                    endTime: '2099-12-30 00:00:00'
                };
                this.imglist = [];
            },
            // 编辑操作
            handleEdit(index, row) {
                this.title = '详情';
                this.idx = index;
                this.details(row.id);
            },
            details(id) {
                advertisingDetails(id).then(res => {
                    if (res.returnCode == 200) {
                        var row = res.data;
                        this.form = row;
                        this.ortool = false;

                        if (row.displayUrl) {
                            this.imglist = [{
                                url: row.displayUrl
                            }];
                        }

                        this.editVisible = true;
                    }
                });
            },
            deleteResource(index, row) {
                this.idx = index;
                this.$confirm('此操作将永久删除该广告, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    advertisingDelete(row.id).then(res => {
                        if (res.returnCode == 200) {
                            this.$message.success(`删除第 ${this.idx + 1} 行成功`);
                            this.tablist();
                        } else {
                            this.$message.success(`删除第 ${this.idx + 1} 失败:` + res.returnMsg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //商品展示
            tablist() {
                advertisingList(this.query).then(res => {
                    if (res.returnCode == 200) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = null;
                        this.pageTotal = 0;
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageNum', 1);
                this.tablist();
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.tablist();
            },
            handleBeforeUpload(file) {
                this.handleimgtype(file);
                this.getmyHeaders();
            },
            handleimgtype(file) {
                if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                    this.$notify.warning({
                        title: '警告',
                        message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
                    });
                    return false;
                }
                let size = file.size / 1024 / 1024 / 2;
                if (size > 2) {
                    this.$notify.warning({
                        title: '警告',
                        message: '图片大小必须小于2M'
                    });
                    return false;
                }
            },
            uploadSuccess(data) {
                if (data.returnCode == 200) {
                    this.form.displayUrl = data.data;
                    document.getElementsByClassName('el-upload--picture-card')[0].style.display = 'none';
                } else {
                    this.$message.success(`上传失败，请重新上传`);
                }
            },
            uploadError(data) {
                this.$message.success(`上传失败，请重新上传`);
            },
            updateRemove() {
                document.getElementsByClassName('el-upload--picture-card')[0].style.display = 'block';
            }
        }
    };
</script>
<!-- css样式实现 -->
<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>


